<!-- 销售目标 -->
<template>
    <view>
        <view class="nav" :class="{'white': !toTop, 'color_22': toTop, 'bgwhite': toTop}">
            <view :style="{height: System.statusBarHeight + 'px'}"></view>
            <view class="p-left30" :style="{'line-height': navHeight + 'px'}">
                <text class="iconfont icon-xiangzuo size34 bold" @click="back()"></text>
                <text class="size34 bold m-left20">数据监控-销售目标</text>
            </view>
        </view>
        <view class="top p-top160 p-left80 p-right80 white p-re" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/dm_bg.png' + ')'}">
            <view class="d-flex f-column a-center m-bot20">
                <view class="d-flex m-bot10 p-left40">
                    <text class="size32 bold m-right20">今日支付金额</text>
                    <u-icon name="reload" color="#fff" size="20" @click="initData()"></u-icon>
                </view>
                <view>
                    <text class="size26 bold">￥</text>
                    <text class="size36 bold">{{ pageData.today_payment || 0 }}</text>
                </view>
            </view>
            <view class="d-flex j-sb m-bot20 p-left10 p-right10">
                <view class="text-center">
                    <view class="size26 m-bot10">昨日支付金额(元)</view>
                    <view class="size32 bold">{{ pageData.yesterday_payment || 0 }}</view>
                </view>
                <view class="text-center">
                    <view class="size26 m-bot10">累计支付金额(元)</view>
                    <view class="size32 bold">{{ pageData.total_payment || 0 }}</view>
                </view>
            </view>
            <view class="m-bot20">
                <view class="m-bot20">
                    <text class="size26">销售目标</text>
                    <text class="label h7 bor_radius_6 padding2-14 m-left14">{{ pageData.percent || 0 }}%</text>
                </view>
                <u-line-progress :percentage="pageData.percent" activeColor="#FFE065" inactiveColor="#A9CFFF" height="6" :showText="false"></u-line-progress>
            </view>
            <view class="d-flex j-sb">
                <view>
                    <view class="size26 m-bot10">本月累计销售(元)</view>
                    <view class="size28 bold">{{ pageData.month_payment || 0 }}</view>
                </view>
                <view class="text-right">
                    <view class="size26 m-bot10">本月销售目标(元)</view>
                    <view class="size28 bold">{{ pageData.sales_target || 0 }}</view>
                </view>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 p-ab">
                <view class="d-flex j-sb a-center">
                    <text class="size30 color_22">近期交易趋势</text>
                    <text class="iconfont icon-tongji size40 color_66" @click="toUrl('/privatePage/sale/tradeTrend')"></text>
                </view>
                <column :raw-data="pageData.sale_trend" height="200rpx" :item-count="6"></column>
            </view>
        </view>
        <view class="padding30 m-top180">
            <!-- 复购 -->
            <view class="rebuy white">
                <view class="size34 color_22 bold m-bot30">用户复购</view>
                <view class="d-flex j-sb">
                    <view class="left bor_radius_6 padding30 p-re">
                        <view class="size26 m-bot4">复购金额(元)</view>
                        <view class="size36 bold">{{ pageData.today_repay_money || 0 }}</view>
                        <view class="m-top10">
                            <text class="h6 m-right20">日环比:</text>
                            <text class="size26 m-right10">{{ pageData.day_repay_money_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.day_repay_money_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.day_repay_money_percent < 0"></text>
                        </view>
                        <view class="m-top10">
                            <text class="h6 m-right20">周同比:</text>
                            <text class="size26 m-right10">{{ pageData.week_repay_money_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.week_repay_money_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.week_repay_money_percent < 0"></text>
                        </view>
                        <image class="icon p-ab" :src="imgUrl + 'Uploads/private/dm_icon1.png'" mode="widthFix"></image>
                    </view>
                    <view class="right bor_radius_6 padding30 p-re">
                        <view class="size26 m-bot4">复购笔数(笔)</view>
                        <view class="size36 bold">{{ pageData.today_repay_count || 0 }}</view>
                        <view class="m-top10">
                            <text class="h6 m-right20">日环比:</text>
                            <text class="size26 m-right10">{{ pageData.day_repay_count_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.day_repay_count_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.day_repay_count_percent < 0"></text>
                        </view>
                        <view class="m-top10">
                            <text class="h6 m-right20">周同比:</text>
                            <text class="size26 m-right10">{{ pageData.week_repay_count_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.week_repay_count_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.week_repay_count_percent < 0"></text>
                        </view>
                        <image class="icon p-ab" :src="imgUrl + 'Uploads/private/dm_icon2.png'" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <!-- 圆环 -->
            <view class="flexac">
                <u-tabs :list="tabList1" :lineColor="color" lineWidth="32" @click="tabClick1" itemStyle="height: 50px;"
                    :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
                    :activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
            </view>
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 text-center m-top40 m-bot40">地区销售比({{ index1 ? '笔数' : '金额' }})</view>
                <ring :raw-data="index1 ? pageData.area_order : pageData.area_money"></ring>
            </view>
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 text-center m-top40 m-bot40">地区复购比({{ index1 ? '笔数' : '金额' }})</view>
                <ring :raw-data="index1 ? pageData.area_repay : pageData.area_repay_money"></ring>
            </view>
            <!-- 排行 -->
            <view>
                <view class="flexac p-re">
                    <u-tabs :list="tabList" :lineColor="color" lineWidth="64" @click="tabClick" itemStyle="height: 50px;"
                        :inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
                        :activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
                    <view class="date p-ab d-flex a-center" @click="showSheet = true">
                        <text class="size26 color_66 m-right10">{{ currName }}</text>
                        <text class="iconfont icon-xiangxia size26 color_99 bold"></text>
                    </view>
                </view>
                <view class="rank m-top30" v-if="rankList.length">
                    <view class="item d-flex j-sb a-center m-bot30" v-for="(item,index) in rankList" :key="index" @click="toGoods(item.goods_id)">
                        <view class="d-flex a-center flex-1">
                            <view class="m-right12">
                                <image :src="imgUrl + 'Uploads/private/dm_icon3.png'" mode="widthFix" v-if="index == 0" class="place"></image>
                                <image :src="imgUrl + 'Uploads/private/dm_icon4.png'" mode="widthFix" v-else-if="index == 1" class="place"></image>
                                <image :src="imgUrl + 'Uploads/private/dm_icon5.png'" mode="widthFix" v-else-if="index == 2" class="place"></image>
                                <view class="place d-flex j-centert" v-else>
                                    <view class="num bor_radius flexac h6">{{ index + 1 }}</view>
                                </view>
                            </view>
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="img f-shrink-0"></image>
                            <view class="size28 color_11 m-left18 ellipsis_2">{{ item.name }}</view>
                        </view>
                        <view class="text-right m-left30">
                            <view class="price size26 bold m-bot10">{{ item.value }}</view>
                            <view class="color_66">
                                <text class="m-right6" v-if="currName == '今日'">较昨日</text>
                                <text class="m-right6" v-if="currName == '当月'">较上月</text>
                                <text class="m-right6" v-if="currName == '当季'">较上季</text>
                                <text class="m-right6" v-if="currName == '当年'">较去年</text>
                                <text style="color: #EB1010;" v-if="item.compare < 0">{{ item.compare }}</text>
                                <text style="color: #32C492;" v-if="item.compare > 0">+{{ item.compare }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <emptys v-else></emptys>
            </view>
            <!-- 上拉菜单 -->
            <u-action-sheet :actions="dateList" :show="showSheet" cancelText="取消" round="10" @close="showSheet = false" @select="handleSelect"></u-action-sheet>
        </view>
    </view>
</template>

<script>
import column from '../components/column.vue'
import ring from '../components/ring.vue'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            tabList: [
                { name: '热销排行', type: 'money' },
                { name: '复购排行', type: 'repay' }
            ],
            dateList: [
                { name: '今日', time_type: 'day' },
                { name: '当月', time_type: 'month' },
                { name: '当季', time_type: 'season' },
                { name: '当年', time_type: 'year' }
			],
            showSheet: false,
            currName: '当月',
            toTop: false,
            pageData: '',
            rankList: [],
            type: 'money',
            time_type: 'month',
            tabList1: [
                { name: '金额' },
                { name: '笔数' }
            ],
            index1: 0
        }
    },
    computed: {
        ...mapState(['System', 'navHeight','color'])
    },
    components: {
        column,
        ring
    },
    onLoad(){
        this.initData()
        this.getRank()
    },
    methods: {
        initData(){
            this.$showLoading('')
            this.$http.get({
                url: '/PrivateSphereApi/saleTarget'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
                this.$hideLoading()
            })
        },
        getRank(){
            this.$http.get({
                url: '/PrivateSphereApi/getRank',
                data: {
                    type: this.type,
                    time_type: this.time_type
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.rankList = res.data || []
            })
        },
        tabClick({type}){
            console.log(type)
            this.type = type
            this.getRank()
        },
        handleSelect({name, time_type}){
            console.log(name, time_type)
            this.currName = name
            this.time_type = time_type
            this.getRank()
        },
        tabClick1({index}){
            this.index1 = index
        }
    },
    onPageScroll(e){
        if(e.scrollTop > 100){
            this.toTop = true
        } else{
            this.toTop = false
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
}
.top {
    height: 680rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .label {
        background: #FF794A;
    }
    .card {
        width: 690rpx;
        height: 280rpx;      
        box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
        left: 50%;
        margin-left: -345rpx;
        top: 580rpx;
    }
}
.rebuy {
    .left, .right {
        width: 330rpx;
        height: 240rpx;
    }
    .left {
        background: linear-gradient(180deg, #1CA2FF, #74E0FF);
    }
    .right {
        background: linear-gradient(180deg, #4633FF, #7582FF);
    }
    .icon {
        width: 90rpx;
        right: 0;
        bottom: 10rpx;
    }
}
.bor_bot_E8 {   
    border-bottom: 1px solid #E8E8E8;
}
.date {
    right: 0;
    top: 34rpx;
}
.rank {
    .item {
        height: 100rpx;
        .place {
            width: 60rpx;
            height: 60rpx;
        }
        .num {
            width: 42rpx;
            height: 42rpx;
            background: #C8E1E9; 
            color: #4C7C8C;    
        }
        .img {
            width: 100rpx;
            height: 100rpx;
        }
        .price {
            color: #F27A24;
        }
    }
}
</style>